import 'package:flutter/material.dart';
import 'package:xview/components/xNavbar.dart';
import 'package:xview/components/xSticky.dart';
import 'package:xview/components/xTabs.dart';
import 'package:xview/utils/dimension.dart';

class tabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: XNavbar(
          title: 'tabs标签',
          elevation: 1
      ).render(context),
      body: XSticky(
          sliverMod: ['view','sticky','view'],
          stickyHeight: [{'minHeight': 44,'maxHeight':44}],
          slivers: [
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: Dimension(context).toPx(40),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text('基础演示',style: TextStyle(color: Color(0xff8f9ca2),fontSize: Dimension(context).toPx(16))),
                        ),
                      ),
                      XTabs(
                        list: ['关注','推荐','科幻','科技','音乐','美食','文化','财经','手工'],
                        onClick: (index){
                          print(index);
                        },
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: Dimension(context).toPx(40),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text('禁止滚动',style: TextStyle(color: Color(0xff8f9ca2),fontSize: Dimension(context).toPx(16))),
                        ),
                      ),
                      XTabs(
                        itemWidth: 90,
                        list: ['关注','推荐','科幻','科技'],
                        scrollable: false,
                        onClick: (index){
                          print(index);
                        },
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: Dimension(context).toPx(40),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text('吸顶效果',style: TextStyle(color: Color(0xff8f9ca2),fontSize: Dimension(context).toPx(16))),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              child: XTabs(
                itemWidth: 90,
                list: ['关注','推荐','科幻','科技'],
                scrollable: false,
                onClick: (index){
                  print(index);
                },
              ),
            ),
            Container(
              height: 1000,
              child: Center(
                child: Text('center'),
              ),
            )
          ],
        ),
    );
  }
}
